<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>游戏详情</title>

    <link href="__CSS__/base.css" rel="stylesheet">
    <link rel="stylesheet" href="__PUBLIC__/custom/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/custom/uimaker/icon.css">
    <link rel="stylesheet" href="__CSS__/providers.css">
    <link rel="stylesheet" href="__CSS__/detial.css">
    <style type="text/css">
        .summary label{
            width: 100px;
        } 
        .pic li:hover .del{
          display: block;
        }
        .myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
    </style>

</head>
<body>

<div class="container" style="padding:10px 30px;">
    <a href="javascript:" onclick="self.location=document.referrer;" class="easyui-linkbutton" iconCls="icon-back">返回</a>
</div>


<div class="contractinfo-table">
    <div id="myModal" class="modal close">
        <img class="modal-content" id="imgInfo">
        <div id="caption"></div>
    </div>
    <div class="summary">
        <form id="addpic" method="post" novalidate="novalidate" enctype="multipart/form-data" style='margin-top: 30px;'>
            <input type="hidden" id="action" name="action">
            <input type="hidden" value="<{$data.gameid}>" name='gameid'></input>

            <div class="binfo">
                <ul>
                    <li style="border-right: 1px solid #5bbc9a">
                        <div><label>游戏名称:</label><input value="<{$data.game}>" type='text' name='game' class='easyui-textbox minp' data-options="required:true"  style="height:28px" /></div>
                        <div><label>排序:</label><input class="easyui-numberspinner minp" value="<{$data.orderid}>" name="orderid" data-options="increment:1,required:true" style="height:30px;"></div>
                        <div><label>联运平台ID:</label><input  class= 'easyui-textbox minp' value="<{$data.lyptid}>" type='text' name='lyptid' data-options="required:true" class="easyui-textbox" style="height:28px" /></div>
                    </li>
                    <li>
                        <div><label>应用ID:</label>
                            <select  name="appid"  style="width: 153px;height: 30px;">
                                <option value="" selected>请选择</option>
                                <volist name="app_id" id="vo">                                                 
                                    <if condition="$vo.appid eq $data[appid]">   
                                      <option value="<{$vo.appid}>" selected>ID:<{$vo.appid}>,<{$vo.app}></option>
                                        <else />  
                                      <option value="<{$vo.appid}>">ID:<{$vo.appid}>,<{$vo.app}></option>  
                                    </if>  
                                </volist> 
                            </select>
                        </div>
                        <div><label>类型编号:</label>
                            <select name="typecode" required='true' style="width: 153px;height: 30px;">
                                <option value="" selected>请选择</option>
                                <volist name="type_id" id="vo">                                                 
                                  <if condition="$vo.typeid eq $data[typecode]">   
                                    <option value="<{$vo.typeid}>" selected>ID:<{$vo.typeid}>,<{$vo.type}></option>
                                      <else />  
                                    <option value="<{$vo.typeid}>">ID:<{$vo.typeid}>,<{$vo.type}></option>  
                                  </if> 
                                </volist> 
                            </select>
                        </div>
                    </li>
                    <div style="clear: both;"></div>
                </ul>
            </div>

            <hr/>
            <div class="diqu">
                <label>区域编号:</label>
                <input  class='minp' id='test' value="<{$data.areacode}>" type='text' name='areacode' readonly="readonly" style="height:28px" />
                <span><{$sheng.area}></span>  <span><{$shi.area}></span>  <span><{$data.area}></span>
            </div>
            <div>
                <label>修改区域:</label>
                <select  id="province_id" style="width:153px;height: 30px;" >
                    <option>请选择</option>
                    <volist name="province_list" id="province">
                      <option  value="<{$province.areacode}>"><{$province.area}></option>
                    </volist>                                                  
                </select>
                  
                <select  id="city_id" style="width:153px;height: 30px;">
                    <volist name="city_list" id="city">
                      <option value="<{$city.areacode}>" selected="selected"><{$city.area}></option>
                    </volist>                                                  
                </select>
                   
                <select id="district_id" style="width:153px;height: 30px;">
                    <volist name="dis_list" id="dis">
                      <option value="{$dis.areacode}" selected="selected">{$dis.area}</option>
                    </volist>                                              
                </select> 
            </div>
            <div>
                <label>属性:</label>
                <volist name="flag" id="vo">
                  <in name="vo.datavalue" value="$data[flag]">
                    <input type="checkbox" name="flag[]" checked="checked" value="<{$vo.datavalue}>"><{$vo.dataname}> [<{$vo.datavalue}>]
                    <else/>
                    <input type="checkbox" name="flag[]"  value="<{$vo.datavalue}>"><{$vo.dataname}> [<{$vo.datavalue}>]
                  </in>
                </volist> 
            </div>
            <hr/>
            <div class="binfo">
                <ul>
                    <notempty name="data.gameid">
                    <li style="border-right: 1px solid #5bbc9a">
                        <div><label>游戏ID:</label><span><{$data.gameid}></span></div>
                        <div><label>操作人:</label><span><{$data.admin}></span></div>
                        <div><label>创建时间:</label><span><{$data.createtime}></span></div>
                        <div><label>修改时间:</label><span><{$data.updatetime}></span></div>
                        <div><label>ID:</label><span><{$data.id}></span></div>
                    </li>
                    </notempty>
                    <li>
                        <div>
                            <label>游戏说明:</label>
                            <input class="easyui-textbox" data-options="multiline:true" value="<{$data.description}>" name='description' style="width:300px;height:100px">
                        </div>
                    </li>
                    <div style="clear: both;"></div>
                </ul>
            </div>
            <hr/>
            <div class="pic">
                <label>游戏图组：</label>
                <ul>
                    <volist name="datap.picarr" id="vo" key="k">
                      <li class="picli-<{$k}>">
                          <input type="hidden" value="<{$vo}>" name='picarr[]'>
                          <a href="javascript:void(0)" onclick = "imdBig()"> 
                            <img class='myImg'  style="height: 100px;" src ='<{:C("WEBHOME")}><{$vo}>'>
                          </a>
                          <div class="del">X</div>
                      </li>
                    </volist>
                    <div style="clear: both;"></div>
                </ul>
            </div>
            <div>
                <label>上传图片:</label>
                <input id="fb1" class="easyui-filebox"name="picarr[]" style="width:150px" data-options="label:'图片上传',prompt:'选择图片',onChange:function(){lookImg(1)}" multiple>
                <div style="margin:24px"id="addImage1"></div>
            </div>
            <hr/>
            <div class="binfo2">
                <ul>
                    <li style="border-right: 1px solid #5bbc9a">
                        <div class="pic onel">
                            <label>游戏图标:</label><br/>
                            <input class="iconimg" type="hidden" value="<{$data.icon}>" name='icon[]'>
                            <notempty name="data.icon">
                                <a href="javascript:void(0)" onclick = "imdBig()"> <img class='myImg' style="height: 100px;" src ='<{:C("WEBHOME")}><{$data.icon}>'></a>
                            </notempty>
                            <div style="clear: both;"></div>
                        </div>
                        <div>
                            <label>上传图片:</label>
                            <input id="fb2" class="easyui-filebox" name="icon[]" style="width:150px" data-options="label:'图片上传',prompt:'选择图片',onChange:function(){lookImg(2)}">
                            <div style="margin:24px" id="addImage2"></div>
                        </div>
                    </li>
                    <li style="border-right: 1px solid #5bbc9a">
                        <div class="pic onel">
                            <label>海报首页推荐:</label><br/>
                            <input class="poimg" type="hidden" value="<{$data.poster}>" name='poster[]'>
                            <notempty name="data.poster">
                            <a href="javascript:void(0)" onclick = "imdBig()"> <img class='myImg' style="height: 100px;" src ='<{:C("WEBHOME")}><{$data.poster}>'></a>
                            </notempty>
                            <div style="clear: both;"></div>
                        </div>
                        <div>
                            <label>上传图片:</label>
                            <input id="fb3" class="easyui-filebox"name="poster[]" style="width:150px" data-options="label:'图片上传',prompt:'选择图片',onChange:function(){lookImg(3)}" >
                            <div style="margin:24px"id="addImage3"></div>
                        </div>

                    </li>
                    <li>
                        <div class="pic onel">
                            <label>特别推荐:</label><br/>
                            <input class="adimg" type="hidden" value="<{$data.adpic}>" name='adpic[]'>
                            <notempty name="data.adpic">
                            <a href="javascript:void(0)" onclick = "imdBig()"> <img class='myImg' style="height: 100px;" src ='<{:C("WEBHOME")}><{$data.adpic}>'></a>
                            </notempty>
                            <div style="clear: both;"></div>
                        </div>

                        <div>
                            <label>上传图片:</label>
                            <input id="fb4" class="easyui-filebox" name="adpic[]" style="width:150px" data-options="label:'图片上传',prompt:'选择图片',onChange:function(){lookImg(4)}" >
                            <div style="margin:24px"id="addImage4"></div>
                        </div>
                    </li>
                    <div style="clear: both;"></div>
                </ul>

            </div>
        </form>
    
        <hr/>
        <div id="dlg-buttons">
            <a style="margin: 10px 50px;" href="javascript:void(0)" class="easyui-linkbutton" id="btnAddOK" iconcls="icon-ok" onclick="btnAddOK()">保存</a>
        </div>
    </div>
</div>

<script type="text/javascript" src="__PUBLIC__/custom/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/custom/jquery.easyui.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/custom/easyui-lang-zh_CN.js"></script>
<script>

$("input").blur(function(){
  $(this).css("border","#aaa solid 1px");
});

$("input").focus(function(){
  $(this).css("border","#1da02b  solid 1.5px");
});

  function btnAddOK() {
        $('#addpic').form('submit',{
            url: '<{:U("Game/addImg")}>',
            onSubmit: function(){
                return $(this).form('validate');

            },
            success: function(result){
              if(result>0){
                if(result==1){
                    $.messager.alert('提示','修改成功!','info',function(){
                          reload();
                      });
                }else{
                   $.messager.confirm('提示', '添加成功，继续添加?', function(r){
                      if (r){
                          reload();
                      }else{
                         window.location.href='<{:U("Game/index")}>'; 
                      }
                  });
                }  

              }else{
                $.messager.show({
                    title: '错误提示',
                    msg: '操作失败'
                });
              }
            }
        });
    }



    $('.del').click(function(){
        $(this).parent().remove();
    })

    // 上传图片预览
    function lookImg(x){
      if(x==2){
        $('.iconimg').remove();
      }else if(x==3){
        $('.poimg').remove();
      }else if(x==4){
        $('.adimg').remove();
      }
      var dd = 'aaa'+x;
        var dd = $("#fb"+x).next().find('input[type=file]')[0];
        if (dd.files && dd.files[0]){
          // 更换图片时清空原图片展示内容
            $('#addImage'+x).html('');
             for(var i=0;i<dd.files.length;i++){
                var reader = new FileReader(dd.files[i]);
                reader.onload = function(e){
            //append为在元素中的末尾添加内容
                    $('#addImage'+x).append("<img class='addimg' src='"+e.target.result+"'height='50px;'/>");
                }
                reader.readAsDataURL(dd.files[i]);
             }
        }
    }


    // 省市县三级联动
    $("#province_id").change(function(){
      $('.diqu span').hide();
      var shengcode=$(this).val();
      var sheng = shengcode.substr(0,2);
      if(sheng == 71|sheng == 81|sheng == 82){
          $('#city_id,#district_id').hide();
          $("#test").val(shengcode);
      }else{
        $('#city_id,#district_id').show();
          if(sheng == 11|sheng == 12|sheng == 31|sheng == 50){
            $.ajax({
            url:'<{:U("Game/xian")}>',
            data:{
              xian:sheng,
            },
            dataType:"json",
            success:function(data){
              $('#city_id').hide();
              var district = data.district;
              var option=$("<option></option>");
              $(option).val("0");
              $(option).html("请选择");
              $("#district_id").html(option);
              for(var i in district){
                var option=$("<option></option>");
                $(option).val(district[i]['areacode']);
                $(option).html(district[i]['area']);
                $("#district_id").append(option);
              }
            }
          });
        }else{
            $.ajax({
            url:'<{:U("Game/shi")}>',
            data:{
              sheng:sheng,
            },
            dataType:"json",
            success:function(data){
              $('#city_id').show();
              var city = data.city;
              var option=$("<option></option>");
              $(option).val("0");
              $(option).html("请选择");
              var option1=$("<option></option>");
              $(option1).val("0");
              $(option1).html("请选择");
              $("#city_id").html(option);
              $("#district_id").html(option1);
              for(var i in city){
                var option=$("<option></option>");
                $(option).val(city[i]['areacode']);
                $(option).html(city[i]['area']);
                $("#city_id").append(option);
              }
            }
          });
        }
      }

    });

    $("#city_id").change(function(){
      var shicode=$(this).val();
      $('input[name="areacode"]').val();
      var xian = shicode.substr(0,4);
      $.ajax({
        url:'<{:U("Game/xian")}>',
        data:{
          xian:xian,
        },
        dataType:"json",
        success:function(data){
          var district = data.district;
          var option=$("<option></option>");
          $(option).val("0");
          $(option).html("请选择");
          $("#district_id").html(option);
          for(var i in district){
            var option=$("<option></option>");
            $(option).val(district[i]['areacode']);
            $(option).html(district[i]['area']);
            $("#district_id").append(option);
          }
        }
      });
    });

    $("#district_id").change(function(){
      var xiancode=$(this).val();
      $("#test").val(xiancode);
    });

     function reload(){
        window.location.reload();
    }

/**
 * 点击设置图片放大
 */
function imdBig() {

    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById("imgInfo");
    var captionText = document.getElementById("caption");
    $(".myImg").on("click",function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    });
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
        modal.style.display = "none";
    }
}



</script>
</body>
</html>
